<template>
  <div class="notice-list">
    <Heads title="消息通知" :right-flag="false"></Heads>

    <van-collapse v-model="activeNames" accordion>
      <div class="notice-item" v-for="item in noticeList" :key="item.id" @click="toViewMsg(item)">
        <span class="time">{{item.time}}</span>

        <div class="content">
          <span class="title">{{item.title}}</span>
          <div class="img-wrapper">
            <img class="pic" :src="item.pic" />
            <div class="cover" v-if="item.cover">活动结束</div>
          </div>
          <van-collapse-item
            title="查看详情"
            :disabled="item.cover"
            :name="item.id"
            title-class="col-item-title"
          >
            <template #default>
              <div style="text-align: left; text-indent: 1.2em;">{{item.introduce}}</div>
            </template>
          </van-collapse-item>
        </div>
      </div>
    </van-collapse>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import Vue from "vue";
import { Icon, Collapse, CollapseItem, Toast } from "vant";

Vue.use(Icon)
  .use(Collapse)
  .use(CollapseItem)
  .use(Toast);
export default {
  data() {
    return {
      noticeList: [
        {
          id: "1",
          time: "11:30",
          title: "新品上市，全场满199减50",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg",
          cover: false,
          introduce:
            "新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起"
        },
        {
          id: "2",
          time: "昨天 12:30",
          title: "新品上市，全场满199减50",
          pic:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3761064275,227090144&fm=26&gp=0.jpg",
          cover: true,
          introduce: ""
        },
        {
          id: "3",
          time: "2019-07-26 12:30<",
          title: "新品上市，全场满199减50",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556465765776&di=57bb5ff70dc4f67dcdb856e5d123c9e7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fd015aa4d95fa801206d96069229.jpg%401280w_1l_2o_100sh.jpg",
          cover: false,
          introduce:
            "新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起，新品上市全场2折起"
        }
      ],
      activeNames: []
    };
  },
  methods: {
    ...mapMutations("footerModule", ["FOOTERSHOW"]),
    toViewMsg(item) {
      if (item.cover) {
        Toast({
          message: "活动已过期,下次早点来~~",
          closeOnClick: true,
          forbidClick: true,
          duration: 500
        });
      }
    }
  },
  mounted() {
    this.FOOTERSHOW(false);
  },
  destroyed() {
    this.FOOTERSHOW(true);
  }
};
</script>

<style lang='scss'>
.notice-list {
  width: 100%;
}
.notice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-top: 5px;
  font-size: 14px;
  color: #7d7d7d;
}

.content {
  width: 355px;
  padding: 0 10px;
  background-color: #fff;
  border-radius: 2px;
}

.title {
  display: flex;
  align-items: center;
  height: 45px;
  font-size: 16px;
  color: #303133;
}

.img-wrapper {
  width: 100%;
  height: 130px;
  position: relative;
}

.pic {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.cover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  color: #fff;
}

.col-item-title {
  text-align: left;
}
</style>
